<template>
  <view class="page-container">
    <view class="user-info flex flex-middle flex-between" @click="toUserInfo">
      <view class="content flex flex-middle">
        <image
          class="avatar"
          mode="aspectFill"
          :src="userInfo.avatar"
          v-if="token"
        />

        <image
          class="avatar"
          src="@/static/image/common/app.png"
          mode="aspectFill"
          v-else
        />

        <view class="info" v-if="token">
          <view class="name flex flex-middle">
            {{ userInfo.nickname }}
            <view class="vip flex flex-middle" v-if="+userInfo.grade">
              <image src="@/static/image/mine/vip.png" mode="widthFix" />
              {{ userInfo.levelName }}
            </view>
          </view>
          <view class="id"> ID:{{ userInfo.uid }} </view>
        </view>

        <view class="info to-login" v-else>去登录</view>
      </view>
      <view class="flex flex-middle">
        <u-icon name="setting" color="#363636" size="26" v-if="token" />

        <u-icon name="arrow-right" color="#363636" size="20" v-else />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["token", "userInfo"]),
  },
  methods: {
    toUserInfo() {
      this.$checkLogin();
      this.$navigateTo("/pages/mine/userInfo");
    },
  },
};
</script>

<style scoped lang="scss">
.user-info {
  height: 90px;
  padding: 0 16px;

  .to-login {
    font-size: 16px;
  }

  .content {
    .info {
      margin-left: 10px;

      .id {
        color: #666;
      }

      .name {
        font-size: 18px;
        color: #222;

        .vip {
          height: 18px;
          line-height: 18px;
          border-radius: 18px;
          background: rgba(#212121, 0.81);
          color: #ffe9cd;
          font-size: 10px;
          font-weight: bold;
          padding-left: 6px;
          padding-right: 8px;
          margin-left: 6px;

          image {
            width: 18px;
          }
        }
      }
    }

    .avatar {
      width: 58px;
      height: 58px;
      border-radius: 50%;
    }
  }
}
</style>